<template>
  <view>
    <!-- 列表渲染 -->
    <view v-for="(item, index) in items" :key="index">
      <text>{{ item.name }}</text>
    </view>
    <!-- 加载提示 -->
    <view v-if="loading">
      <text>加载中...</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    url: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      items: [],   // 列表数据
      page: 1,     // 当前页数
      loading: false, // 加载状态
      hasMore: true // 是否有更多数据
    };
  },
  mounted() {
    this.loadMore();
  },
  methods: {
    async loadMore() {
      if (this.loading || !this.hasMore) return;
      this.loading = true;

      try {
        const response = await wx.request({
          url: this.url,
          method: 'GET',
          data: {
            page: this.page,
            pageSize: 10
          }
        });

        const newItems = response.data; // 假设数据在 data 字段中

        // 如果返回的数据长度小于10，认为没有更多数据了
        if (newItems.length < 10) {
          this.hasMore = false;
        }

        // 合并新数据
        this.items = this.items.concat(newItems);

        this.page += 1;
      } catch (error) {
        console.error('加载数据失败', error);
      } finally {
        this.loading = false;
      }
    },
    onReachBottom() {
      this.loadMore();
    }
  }
};
</script>

<style scoped>
/* 样式可根据需求定制 */
</style>